<template>
	<view>
		<uni-popup
			ref="searchList"
			@maskClick="closePopup"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title">
					{{ title }}
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view v-if="type === 'multiple'" class="ga mb20"
						>可多选</view
					>
					<view
						v-for="item in dataList"
						:key="item.value"
						class="p20 bd-bottom-f2"
						@tap="chooseBlock(item)"
					>
						<view class="flex-between">
							<view>
								<view class="mb10">{{
									item.label.nodeName
								}}</view>
								<view>{{
									item.label.users
										.map((i) => i.name)
										.join(',')
								}}</view>
							</view>
							<view
								v-if="
									chooseVal
										.map((i) => i.value)
										.includes(item.value)
								"
								><uni-icons
									type="checkmarkempty"
									size="50rpx"
									color="#5385FC"
								></uni-icons
							></view>
						</view>
					</view>
				</view>
				<view class="popup-bottom pt20">
					<button
						class="primary-button w100 ml20 mr20"
						@tap="submitChoose()"
					>
						确认选择
					</button></view
				>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '请选择',
		},
		value: {
			type: Array,
			default: () => [],
		},
		localData: {
			type: Array,
			default() {
				return []
			},
		},
		type: {
			type: String,
			default: 'single', //single 单选, multiple 多选
		},
		showSearch: {
			type: Boolean,
			default: true,
		},
		popupHeight: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			dataList: [],
			scrollHeight: 0,
			pageSize: 20,
			pageIndex: 1,
			chooseVal: [],
		}
	},
	mounted() {},
	methods: {
		//打开弹窗
		openPopup() {
			this.countScrollHeight()
			this.dataList = this.localData
			this.pageIndex = 1
			this.$refs.searchList.open('bottom')
		},
		//关闭弹窗
		closePopup() {
			this.$refs.searchList.close()
			this.$emit('close')
		},
		//中间滚动框高度
		countScrollHeight() {
			let reg = /[^\d]/g
			let regStr = /[^a-zA-Z]/g
			if (this.popupHeight) {
				let popupNum = parseInt(this.popupHeight.replace(reg, ''))
				let popupStr = this.popupHeight.replace(regStr, '')
				this.scrollHeight = popupNum - 100 - 160
			} else {
				this.scrollHeight = 1100 - 100 - 160
			}
			if (this.showSearch) {
				this.scrollHeight = this.scrollHeight - 100
			}
		},
		//item选中
		chooseBlock(item) {
			if (this.type === 'single') {
				this.chooseVal = []
				this.chooseVal = [item]
			} else {
				if (
					this.chooseVal.map((val) => val.value).includes(item.value)
				) {
					const index = this.chooseVal.findIndex(
						(i) => i.value === item.value
					)
					this.chooseVal.splice(index, 1)
				} else {
					this.chooseVal.push(item)
				}
			}
		},
		//调用确认方法
		emitSubmit() {
			this.$emit('submit', this.chooseVal)
		},
		//确认选择
		submitChoose() {
			this.emitSubmit()
			this.closePopup()
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
				this.chooseVal = this.value
			} else {
				this.closePopup()
			}
		},
		localData: {
			immediate: true,
			handler(val, old) {
				if (Array.isArray(val) && old !== val) {
					this.dataList = val
				}
			},
		},
	},
}
</script>

<style scoped lang="scss">
.item-cont {
	border: 2rpx #dddddd solid;
	padding: 20rpx;
	margin-right: 20rpx;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}
.item-active {
	border-radius: 10px 10px 10px 10px;
	background-color: rgba(239, 239, 239, 0.5);
}
.ga {
	color: #9a9a9a;
}
</style>
